<#import "/macro.ftl" as m>
<@m.page_header title='后台' />
<script type="text/javascript" src="/assets/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/assets/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="/assets/ueditor/lang/zh-cn/zh-cn.js"></script>
<div id="page-content-wrapper">

    <div id="page-title">
        <h3>
        <#if template>修改模板<#else>添加模板</#if>
        </h3>
    </div>

    <div class="pad10A">
    <#if template>
    <form id="demo-form1" action="/products/template/updating" class="col-md-12" method="POST">
    <#else>
    <form id="demo-form1" action="/products/template/adding" class="col-md-12" method="POST">
    </#if>
        <input type="hidden" name="id" value="${template.id}"/>
        <div class="form-row">
            <div class="form-label col-md-2">
                <label for="">
                    模板名称:
                    <span class="required">*</span>
                </label>
            </div>
            <div class="form-input col-md-8">
                <input type="text" id="name" name="name" data-trigger="change" data-required="true"
                       class="parsley-validated" value="${(template.name)?xhtml}">
            </div>
        </div>
        <div class="form-row">
            <div class="form-label col-md-2">
                <label for="">
                    模板类型:
                    <span class="required">*</span>
                </label>
            </div>
            <div class="form-input col-md-8">
                <input type="text" id="type" name="type" data-trigger="change" data-required="true"
                       class="parsley-validated" value="${(template.type)?xhtml}">
            </div>
        </div>
        <div class="form-row">
            <div class="form-label col-md-2">
                <label for="">
                    备注:
                    <span class="required">*</span>
                </label>
            </div>
            <div class="form-input col-md-8">
                <input type="text" id="remark" name="remark" data-trigger="change" data-required="true"
                       class="parsley-validated" value="${(template.remark)?xhtml}">
            </div>
        </div>
        <div class="form-row">
            <div class="form-label col-md-2">
                <label for="">
                    内容:<span class="required">*</span>
                </label>
            </div>
            <div class="content-box bg-white post-box col-md-8">
                <input type="hidden" name="content" value='内容' id="conhtml"/>
                <script id="editor" type="text/plain" style="width:100%;height:200px;">${template.content}</script>
            </div>
        </div>

        <div class="form-row">
            <div class="form-label col-md-2">
                <label for="">
                    自定义字段:
                </label>
            </div>
            <div class="form-label col-md-2">
                 <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" onclick="addField(this)"
                   title="" href="#s">
                   <i class="glyph-icon icon-plus"></i>
                </a>
            </div>

        </div>


	       <#list fields as field>
	        <div class="form-row">
                <input type="hidden" value="${field.id}"/>
	            <div class="form-label col-md-2">
	            </div>
	 			
	            <div class="form-input col-md-2">
	                <input type="text" placeholder="字段名称" id="name" name="fieldList[${field_index}].name" data-trigger="change"
	                       class="parsley-validated" value="${((field.name)!'')?xhtml}">
	            </div>
	            <div class="form-input col-md-2">
	                <input type="text" placeholder="编码" id="code" name="fieldList[${field_index}].code" data-trigger="change"
	                       class="parsley-validated" value="${((field.code)!'')?xhtml}">
	            </div>
                <div class="form-input col-md-2">
                    <select name="fieldList[${field_index}].type">
                            <option value="文字" <#if field.type == "文字">selected="selected"</#if>>文字</option>
                            <option value="图片" <#if field.type == "图片">selected="selected"</#if>>图片</option>
                            <option value="数值" <#if field.type == "数值">selected="selected"</#if>>数值</option>
                    </select>
                </div>
                <div class="form-input col-md-1">
                    <select name="fieldList[${field_index}].required" value="">
                        <#if field.required == "REQUIRED">
                            <option value="REQUIRED" selected="selected">必填</option>
                            <option value="NOT_REQUIRED">可选</option>
                        <#elseif field.required == "NOT_REQUIRED">
                            <option value="REQUIRED">必填</option>
                            <option value="NOT_REQUIRED" selected="selected">可选</option>
                        </#if>
                    </select>
                </div>
                <div class="form-input col-md-1">
                    <select name="fieldList[${field_index}].css" value="">
                            <option value="${field.css}" selected="selected">${field.css}</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                    </select>
                </div>
                <div class="form-input col-md-1">
                    <a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" onclick="removeField(this)" title="" href="#s">
                        <i class="glyph-icon icon-minus"></i>
                    </a>
                </div>

	        </div>
	       </#list>

    </form>

    </div>

    <div class="divider"></div>
    <div class="form-row">
        <input type="hidden" name="superhidden" id="superhidden">

        <div class="form-input col-md-10 col-md-offset-2">
            <a href="javascript:;" class="btn medium primary-bg radius-all-4 col-md-2" id="demo-form-2-valid">
                提交
            </a>
        </div>
    </div>

</div>


<script>
    function changeMethod(element) {
        $(element).empty();
        var html = $.parseHTML('<i class="glyph-icon icon-minus"></i>');
        $(html).appendTo(element);
        $(element).attr("onclick", "reduce(this);")
    }

    function reduce(element) {
        $(element).parent().parent().remove();
    }
	<#if fields>
	var listSize=${fields?size};
	<#else >
	var listSize=0;
	</#if>

    function addField(element) {
        var html = $.parseHTML(
                '<div class="form-row">' +
                '<div class="form-input col-md-2">'+
                '</div>'+
                '<div class="form-input col-md-2">' +
                '<input type="text" placeholder="字段名称" id="name" name="fieldList['+listSize+'].name" data-trigger="change" data-required="true" class="parsley-validated" value="${(product.name)?xhtml}">' +
                '</div>' +
                '<div class="form-input col-md-2">' +
                '<input type="text" placeholder="编码" id="code" name="fieldList['+listSize+'].code" data-trigger="change" data-required="true" class="parsley-validated" value="${(product.name)?xhtml}">' +
                '</div>' +
                '<div class="form-input col-md-2">' +
                '<select name="fieldList['+listSize+'].type">'+
                        '<option value="文字">文字</option>'+
                        '<option value="图片">图片</option>'+
                        '<option value="数值">数值</option>'+
                '</select>'+
                '</div>' +
                '<div class="form-input col-md-1">' +
                '<select name="fieldList['+listSize+'].required" value="">'+
                    '<option value="REQUIRED" selected="selected">必填</option>'+
                    '<option value="NOT_REQUIRED">可选</option>'+
                '</select>'+
                '</div>' +
                '<div class="form-input col-md-1">'+
                    '<select name="fieldList['+listSize+'].css" value="">'+
                        '<option value="2">占位</option>'+
                        '<option value="1">1</option>'+
                        '<option value="2">2</option>'+
                        '<option value="3">3</option>'+
                        '<option value="4">4</option>'+
                    '</select>'+
                '</div>'+
                '<div class="form-input col-md-1">' +
                '<a class="btn medium radius-all-4 mrg5A ui-state-default tooltip-button" onclick="removeField(this)" title="" href="#s"><i class="glyph-icon icon-minus"></i></a>' +
                '</div>');
        $("form").append(html);
        listSize++;

        return;
    }

    function removeField(ele){
    	$(ele).parent().parent().remove()
    	listSize--;
    }

    //TODO
    function checkRequired() {
        var require = false;
        require = $("#name").getAttribute("data-required");
        if (require) {
            if ($("#name").val() == null) {

            }
        }
    }

    $(function () {
        /*$("select").change(function(){
            $('input[name="required"]').val($("select").val());
        });
                    alert($('input[name="required"]').val());

*/

    <#if template!=null>
        var uySaveFloder = "product/${(product.id)!''}";
    </#if>
    <#if template==null>
        var uySaveFloder = "product/" + new Date().getFullYear() + "" + new Date().getMonth() + "" + new Date().getDate();
    </#if>

        var ue = UE.getEditor('editor', {upYunSaveFolder: "sdnsjdhj"});
        ue.options.allowDivTransToP = false;

        $("#demo-form-2-valid").click(function () {
            $("#conhtml").val(UE.getEditor('editor').getContent());

            if ($("#conhtml").val() == "") {
                alert("内容不能为空");
                return false;
            }


            $('#demo-form1').parsley('validate');
	    	$('#demo-form1').trigger('submit');
	    	return;
        });

    })
</script>